<template>
	<view class="container">
		<view class="coach-info padding-left padding-right flex align-center">
			<view class="avatar">
				<image :src="coachInfo.cover_url" mode="aspectFit"></image>
			</view>
			<view class="info flex-direction justify-around">
				<view class="name-info flex align-center">
					<view class="text-lg text-white">{{coachInfo.realname}}</view>
					<view class="margin-left text-xs text-orange">认证教练</view>
				</view>
				<view class="tips-txt">{{coachInfo.brief_intro_ellipsis}}</view>
				<view class="margin-top flex align-center">
					<view>
						<text class="text-orange">¥{{coachInfo.price}}</text>
						<text class="text-white">/节</text>
					</view>
					<view class="text-gray text-sm sale-num">起售节数：{{coachInfo.sale_num}}</view>
				</view>
			</view>
		</view>
		<view class="other-info padding primary-bg margin-top">
			<view class="info-item">
				<view class="title text-white text-lg">擅长项目</view>
				<view class="content text-gray text-sm margin-top margin-left">{{coachInfo.expert_str}}</view>
			</view>
			<view class="info-item mt80">
				<view class="title text-white text-lg">专业资质</view>
				<view class="content text-gray text-sm margin-top margin-left">
					<text>{{coachInfo.qualification}}</text>
				</view>
			</view>
		</view>
		<view class="btn-area mt80 flex align-center">
			<navigator class="buy-btn" :url="`/pages/coach/order?id=${coachInfo.id}`">
				<button class="cu-btn lg block bg-orange">购买私教课程</button>
			</navigator>
		</view>
	</view>
</template>

<script>
import coach from '@/api/coach.js';

export default {
	data() {
		return {
			coachInfo: {}
		}
	},
	onLoad(options) {
		this.getCoachInfo(options.id);
	},
	methods: {
		async getCoachInfo(id) {
			const res = await coach.show(id);
			this.coachInfo = res.data;
		}
	}
}
</script>

<style scoped lang="less">
	.container {
		.coach-info  {
			height: 200upx;
			.avatar {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				margin-left: 20upx;
				image {
					height: 100%;
					border-radius: 50%;
				}
			}
			.info {
				width: 100%;
				margin-left: 60upx;
				.sale-num {
					margin-left: 80upx;
				}
			}
		}
		.other-info {
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
		}
		.btn-area {
			width: 100%;
			.buy-btn {
				width: 80%;
				margin: 0 auto;
			}
		}
	}
</style>
